<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            width:100%;
            margin: 0 auto;
            position: relative;          
            background-color: rgb(182, 179, 180);
        }
        ul{
            list-style-type: none;
        }
        .header{
           
            height: 500px;
           background-image: url(02.jpg);
        }
        .header >.image{
            height: 500px;
            position: relative;
        }
        .header >.image .logo{
            position: absolute;
            left: 50px;
            top: 50px;
            width: 300px;
            height: 80px;
        }
        .title ul{
            margin-bottom: 50px;
            height: 60px;
            background-color: blue;
        }
        .title ul li{
            display: inline-block;
            width: 150px;
            padding: 15px   20px;
          box-sizing: border-box;
            text-align: center;
            vertical-align: middle;
            font-size: 18px;
        }
        .title ul li a{
            text-decoration: none;
            color: #ffffff;
        }
        
        .container{
            width: 100%;
            height: 1700px;
        }
        .container >.image{
            width: 620px;
            height: 500px;
            display: inline-block;
            text-align: center;
            vertical-align: middle;
            transform: translate(-50% -50%);
        }
        .container >.image >.tiao{
            margin: 0 auto;
            width: 600px;
            height: 95px;
            background-color: rgb(52, 52, 228);
        }
        .container >.image >.tiao span{
            line-height: 80px;
            text-align: center;
            font-size: 36px;
            color: rgb(216, 23, 23);
            animation: zz 1s linear infinite alternate ;
        }

        @keyframes zz {
            form{
                transform: scale(1) ;
            }
            to{
                color: rgb(255, 195, 42);
                transform: scale(2);

            }
            
        }
        .container >.image >.tiao span:hover{
            color: deepskyblue;
            
        }
        .container >.image img:hover{
            transform:scale(1.2);
        }
        .container >.content{
            margin: 10px 5px ;
            padding: 10px 20px ;
            box-sizing: border-box;
            width: 610px;
            height: 500px;
            display: inline-block;
            text-align: center;
            vertical-align: middle;
            cursor: pointer;
            background-color: rgb(170, 168, 168);
        }
        .container >.content >.title{
            padding-top: 10px;
            width: 620px;
            height: 40px;
            position: relative;
        }
        .container >.content >.title h2{
            position: absolute;
            top: 0;
            left: 10px;
            color: blue;
            vertical-align: middle;
            border-bottom: 2px solid blue;
        }
        .container >.content >.title span{
            position: absolute;
            top: 5px;
            right: 50px;
            font-size: 12px;
            color: red;
            vertical-align: middle;
            border-bottom: 2px solid red;
        }
        .container >.content >.xinwen{
            width: 620px;
            height: 455px;
        }
        .container >.content >.xinwen ul li{
            line-height: 50px;
            text-align: center;
            vertical-align: middle;
        }
        .foot{
            position:absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100px;
            background-color: rgb(9, 9, 163);
        }
        .foot p{
            padding-top: 30px;
            font-size: 14px;
            color: #fff;
            text-align: center;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="image">
            <img src="山西中医药大学logo.png" alt="" class="logo">
            <img src="01.png" alt="">
        </div>
    </div>    
    <div class="title">
            <ul>
                <li> <a href="index.html">首页</a> </li>
                <li> <a href="people.html">最美逆行者</a></li>
                <li> <a href="ourself.html">从我做起</a></li>
                <li> <a href="help.html">支援武汉</a></li>
                <li> <a href="news.html">国内外新闻</a></li>
                <li> <a href="follow.html">社会关注</a></li>
            </ul>
    </div>
    <div class="container">
        <div class="image">
            <img src="首页宽6高5.jpg" alt="">
            <div class="tiao">
                <span>
                    坚决打赢疫情防控关键战
                </span>

            </div>
        </div>
        <div class="content">
            <div class="title">
                <h2>最美逆行者</h2>
                <span>更多 > > </span>
            </div>
            <div class="xinwen">
                <ul>
                    <li>北京医疗队代号:京兵强将</li>
                    <li>天津医疗队代号:津字招牌</li>
                    <li>河北医疗队代号:冀来之则安之。</li>
                    <li>内蒙古代号：别害怕蒙蒙达</li>
                    <li>黑龙江号叫：夜再黑终见光明。</li>
                    <li>江苏医疗队代号:苏大强 。</li>
                    <li>江西医疗队代号:赣做敢当。</li>
                    <li>山西医疗队代号:竭晋全力</li>
                    <li>人民解放军：闻令而动。</li>
                </ul>

            </div>

        </div>
        <div class="content">
            <div class="title">
                <h2>从我做起</h2>
                <span>更多 > > </span>
            </div>
            <div class="xinwen">
                <ul>
                    <li>1、公共场所我应该怎么做？</li>
                    <li>2、与人接触后我应该怎么做？</li>
                    <li>3、尽量减少到人群密集场所活动并且关注症状</li>
                    <li>4、洗手在预防呼吸道传播疾病中的作用</li>
                    <li>5、勤洗手和保持良好的呼吸道卫生习惯</li>
                    <li>6、哪些时候需要洗手</li>
                    <li>7.旅途在外没有清水，不方便洗手怎么办？</li>
                    <li>8、外出要注意什么？</li>
                    <li>9、日常饮食要怎样？</li>
                </ul>

            </div>

        </div>
        <div class="content">
            <div class="title">
                <h2>个人防护</h2>
                <span>更多 > > </span>
            </div>
            <div class="xinwen">
                <ul>
                    <li>1、正确洗手需掌握六步洗手法</li>
                    <li>2、增强体质、免疫力，保持环境清洁和通风</li>
                    <li>3、尽量减少到人群密集场所活动并且关注症状</li>
                    <li>4、洗手在预防呼吸道传播疾病中的作用</li>
                    <li>5、勤洗手和保持良好的呼吸道卫生习惯</li>
                    <li>6、哪些时候需要洗手</li>
                    <li>7.旅途在外没有清水，不方便洗手怎么办？</li>
                    <li>8、口罩该怎么选？</li>
                    <li>9、正确使用口罩</li>
                </ul>

            </div>

        </div>
        <div class="content">
            <div class="title">
                <h2>国内外新闻</h2>
                <span>更多 > > </span>
            </div>
            <div class="xinwen">
                <ul>
                    <li>从"吃得饱"到"吃得好":总书记眼中"小康菜谱"</li>
                    <li>面对世界经济复杂局面 习近平提出三个“新”</li>
                    <li>两会今日看点：全国政协十三届三次会议闭幕</li>
                    <li> 最新疫情：国内新增无症状感染者55例。</li>
                    <li>法国新冠肺炎新增确诊276例，累计确诊145555..</li>
                    <li>中国援助第三批物资抵达 乌克兰：非常及时</li>
                   <li>巴西新冠确诊升至全球第二，拉美为何成为全球疫情中心？</li>
                    <li>特朗普:如果不是我做得好 会有150到200万人死亡</li>
                    <li>美国新冠肺炎死亡病例超10万例</li>
                </ul>

            </div>

        </div>
        <div class="content">
            <div class="title">
                <h2>社会关注</h2>
                <span>更多 > > </span>
            </div>
            <div class="xinwen">
                <ul>
                    <li>关于新型冠状病毒肺炎的12个问答，家长师生了解一下</li>
                    <li>全国教育收费治理办1号预警：谨防有人利用疫情防控期间线上进行网上收费</li>
                    <li>关于组织全校学生参加“全国大学生同上一堂疫情防政大课”学习研讨的通知</li>
                    <li>重大决定！重要安排！重点工作！省委第二十二次专题部署！</li>
                    <li>​习近平主持政治局常委会 研究当前新冠肺炎疫情防控和稳定社会运行重点工作</li>
                    <li>坚决防范发生疫情燃点，坚决守住安全稳定底线，16张海报看山西部署</li>
                    <li>关于坚决打赢新冠肺炎疫情防控阻击战的倡议书</li>
                   
                </ul>

            </div>

        </div>
    </div>
    <div class="foot">
        <p>  山西中医药大学 1B523宿舍&&版权所有。。。。。。地址：山西省晋中市榆次区 </p>

    </div>
    
</body>
</html>